<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style=" margin-top: 12px;">
        <div class="stepbox">
          <div class="step">
            <div class="num">1</div>
            <div class="desc">
              <div>选择商品</div>
              <div>开团/参团</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="step">
            <div class="num">2</div>
            <div class="desc">
              <div>邀请好友</div>
              <div>好友参团</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="step">
            <div class="num">3</div>
            <div class="desc">
              <div>人满成团</div>
              <div>发货</div>
            </div>
          </div>
        </div>
      </div>

      <div class="block">
        <div class="addressbox" @click="onAddressSelect">
          <div class="header">
            <div style="flex:1">收货人：{{address.true_name}}</div>
            <div>{{address.mob_phone}}</div>
          </div>
          <div class="address">
            <img class="icon" src="@/assets/img/ic_address.png"/>
            <div class="text">{{address.area_info}}{{address.address}}</div>
          </div>
        </div>
      </div>

      <div class="block" v-for="(lItem,lIndex) in supplier_cart_list" :key="lIndex">
        <div class="commoditybox" v-for="(item,index) in lItem" :key="index">
          <img class="image" :src="item.goods_image_main"/>
          <div class="content">
            <div class="title">{{item.goods_name}}</div>
            <div class="pricebox">
              <div class="left">
                <div class="price">{{item.activity_info.Groupbuy_info.effect_info.groupbuy_price}}元</div>
                <div class="tag">{{item.activity_info.Groupbuy_info.effect_info.groupbuy_number}}人团</div>
              </div>
              <div class="right">
                <div class="d-price">原价：{{item.goods_origin_price}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div class="block">
          <div class="operationbar">
            <div class="left"></div>
            <div class="right">
              <div class="text">
                实付金额：
                <span class="price">￥{{totalAmount}}</span>
              </div>
              <button class="sub" @click="onCreateGroupOrder">立即支付</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Mall from '@/dll/mall'
  import Pay from '@/dll/pay'

  export default {
    name: 'mallGroupBuy',
    data () {
      return {
        xheader: {
          title: '确认订单'
        },
        address: {},
        supplier_cart_list: [],
        totalAmount: 0,
        groupbuy_id: '',
        goods_sku: '',
        join_groupbuy_order_sn: ''
      }
    },
    created () {
      this.join_groupbuy_order_sn = this.$route.query.join_groupbuy_order_sn
      this.init()
    },
    activated () {
      if (this.globalData.tempAddressSelect) {
        this.address = this.globalData.tempAddressSelect
      }
    },
    beforeDestroy () {
      this.globalData.tempAddressSelect = null
    },
    methods: {
      onAddressSelect () {
        this.$router.push({ name: 'addressSelect' })
      },
      onCreateGroupOrder () {
        this.createGroupOrder()
      },
      init () {
        this.groupbuy_id = this.$route.query.groupbuy_id
        this.goods_sku = this.$route.query.goods_sku
        this.groupConfirmOrder()
      },
      // 确认参团或开团
      async groupConfirmOrder () {
        let globalData = this.globalData

        let userInfo = globalData.userInfo
        let param = {
          groupbuy_id: this.groupbuy_id,
          goods_sku: this.goods_sku,
          member_name: globalData.userInfo.employee_name,
          header_pic: userInfo.avatarUrl || 'null'
        }
        if (this.join_groupbuy_order_sn) {
          param.join_groupbuy_order_sn = this.join_groupbuy_order_sn
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.groupConfirmOrder(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.address = res.data.address
          this.couponr = res.data.coupon
          this.freight = res.data.freight * 1
          this.goods_total = res.data.goods_total * 1
          this.jd = res.data.jd
          this.supplier_cart_list = res.data.supplier_cart_list
          this.totalAmount = res.data.totalAmount * 1
        }
        if (res.code == 5000) {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg,
            onHide: () => {
              this.$router.replace({
                name: 'mallOrder',
                params: { tabIndex: 1 }
              })
            }
          })
        }
      },
      // 创建团购订单
      async createGroupOrder () {
        let globalData = this.globalData
        let userInfo = globalData.userInfo
        let param = {
          groupbuy_id: this.groupbuy_id,
          goods_sku: this.goods_sku,
          member_name: globalData.userInfo.employee_name,
          header_pic: userInfo.avatarUrl || '/',
          address_id: this.address.address_id
        }
        if (this.join_groupbuy_order_sn) {
          param.join_groupbuy_order_sn = this.join_groupbuy_order_sn
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.createGroupOrder(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$router.replace({
            name: 'payIng',
            params: { sn: res.data.order_sn_arr }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },
      // 创建WX订单
      async createWxOrder (sn) {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Pay.createWxPayOrder(sn)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$router.replace({
            name: 'pay',
            query: { order_sn: sn[0] },
            params: { id: res.data.pay_sn, wxPayUrl: res.data.mweb_url }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg,
            onHide: () => {
              this.$router.replace({
                name: 'mallOrder',
                params: { tabIndex: 1 }
              })
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .stepbox {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    padding: 40px 24px;
  }

  .stepbox .step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stepbox .line {
    margin-top: 28px;
    height: 1px;
    background-color: #e6e6e6;
    width: 32px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .stepbox .step .num {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    text-align: center;
    line-height: 54px;
    color: #624540;
    font-size: 16px;
  }

  .stepbox .step .desc {
    margin-top: 12px;
    text-align: center;
    color: #624540;
    font-size: 14px;
    line-height: 20px;
  }

  .addressbox {
    background-color: #fff;
    padding: 16px;
    padding-right: 38px;
    position: relative;
  }

  .addressbox::before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -4px;
  }

  .addressbox .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #351009;
    line-height: 22px;
    font-weight: 600;
  }

  .addressbox .address {
    margin-top: 14px;
    display: flex;
    align-items: center;
  }

  .addressbox .address .icon {
    height: 20px;
    width: 20px;
    margin-right: 5px;
    display: block;
  }

  .addressbox .address .text {
    color: #ac9c98;
    font-size: 14px;
    line-height: 20px;
  }

  .commoditybox {
    background-color: #fff;
    display: flex;
    padding: 16px;
    align-items: center;
  }

  .commoditybox .image {
    width: 90px;
    height: 90px;
    display: block;
    background-color: #f5f5f5;
    margin-right: 12px;
  }

  .commoditybox .content {
    flex: 1;
  }

  .commoditybox .title {
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    font-weight: 500;
    color: #a1908c;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .commoditybox .pricebox {
    display: flex;
    align-items: center;
  }

  .commoditybox .pricebox .left {
    align-items: center;
    display: flex;
    flex: 1;
  }

  .commoditybox .pricebox .right {
    display: flex;
    align-items: center;
  }

  .commoditybox .pricebox .price {
    font-size: 14px;
    line-height: 20px;
    color: #ae2309;
  }

  .commoditybox .pricebox .tag {
    width: 36px;
    height: 16px;
    border: 1px solid #ae2309;
    font-size: 10px;
    color: #ae2309;
    box-sizing: border-box;
    line-height: 14px;
    text-align: center;
    display: block;
    margin-left: 8px;
  }

  .commoditybox .pricebox .d-price {
    color: #d3cbc9;
    font-size: 12px;
    line-height: 17px;
    text-decoration: line-through;
  }

  page {
    padding-bottom: 73px;
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-bottom: 24px;
  }

  .operationbar {
    display: flex;
    background-color: #fff;
    height: 49px;
  }

  .operationbar .left {
    flex: 1;
  }

  .operationbar .right {
    display: flex;
    align-items: center;
  }

  .operationbar .sub {
    height: 49px;
    font-size: 14px;
    width: 88px;
    background-color: #ae2309;
    color: #fff;
    line-height: 49px;
  }

  .operationbar .text {
    font-size: 16px;
    color: #624540;
    margin-right: 12px;
  }

  .operationbar .price {
    color: #ae2309;
  }
</style>
